<template>
  <div class="left-side-bar">
    <div class="bar-card" :class="{ visible: !!activeItem }"><sideBarContent :dataSrc="{}" /></div>
    <div class="btns">
      <a v-for="e in items" :class="{ active: activeItem === e.name }" :key="e.name" :title="e.title" @click="clickItem(e)">
        <component :is="e.icon" />
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import sideBarContent from './side-bar-content';
import { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'left-side-bar',
  components: { sideBarContent, GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined },
  setup() {
    const items_ = [
      {
        name: 'layers',
        title: '图层设置',
        icon: 'SwitcherOutlined'
      },
      {
        name: 'scene',
        title: '场景效果',
        icon: 'PictureOutlined'
      },
      {
        name: 'other',
        title: '其它选项',
        icon: 'SettingOutlined'
      }
    ];
    return { items_ };
  },
  props: {
    dataSrc: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      activeItem: ''
    };
  },
  computed: {
    items() {
      return this.dataSrc.items || this.items_;
    }
  },
  watch: {},
  methods: {
    clickItem(e) {
      let { name } = e;
      if (this.activeItem === name) {
        name = '';
      }
      this.activeItem = name;
    }
  }
});
</script>

<style lang="less">
.left-side-bar {
  position: absolute;
  left: 0;
  top: 85px;
  bottom: 160px;
  z-index: 9;
  display: flex;
  flex-direction: row;

  .bar-card {
    height: 100%;
    width: 0;
    opacity: 0.8;

    // background-color: rgba(0, 0, 200, 0.7);

    border: 3px solid rgba(0, 0, 200, 0.7);
    border-left: none;

    transition: all 200ms;

    &.visible {
      width: 200px;
    }
  }

  .btns {
    display: flex;
    flex-direction: column;

    & > a {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8em;
      width: 1.8em;
      height: 1.6em;
      margin: 2px 0;
      color: white;
      background-color: rgba(40, 48, 60, 1);
      border-radius: 5px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      opacity: 0.5;
      transition: all 500ms;

      &:first-child {
        margin-top: 0;
      }

      &.playing {
        background-color: rgba(0, 0, 200, 1);
      }

      &.active,
      &:hover {
        opacity: 0.8;
        background-color: rgba(0, 0, 200, 0.7);
      }

      &:active {
        opacity: 0.9;
        background-color: rgba(0, 0, 200, 0.9);
      }
    }
  }
}
</style>
